<!-- 三餐推荐页 -->
<template>
	<view class="daily" :style="{height: totalHeight}">
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
		    <block slot="backText">返回</block>
		    <block slot="content">三餐推荐</block>
		</cu-custom>
		<!--搜索框-->
		<view class="search" @click="toSearch()">
			<u-search disabled placeholder="搜菜谱" shape="square" :showAction="false" inputAlign="center" height="40"></u-search>
		</view>
		<!-- 顶部导航栏 -->
		<view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" v-for="(item,index) in scrollViewList" :key="index" @tap="changeSwiper(index)">
						<view :class="TabCur==index?'text-red':'text-grey'">
							{{item.dailyName}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 早餐、午餐、晚餐列表推荐 -->
		<view class="footer">
			<!-- <view style="height: 500rpx;">哈哈</view> -->
			<swiper :indicator-dots="false" :autoplay="false" class="swiper" :current="TabCur" ref="swiper" @change="changeScroll" :style="{height:swiperHeight}">
				
				<block v-for="(item,index) in scrollViewList" :key="index">
					<swiper-item>
						<scroll-view scroll-y="true" class="swiper-scroll" :style="{height:swiperHeight}">
							<view class="swiper-item">
								{{item.dailyName}}
								<daily-dishes :list="item.list" @itemClick="toDishInfo"></daily-dishes>
							</view>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>
		</view>

	</view>
</template>

<script>
	import dailyDishes from "../../components/dish-big-item/dish-big-item.vue"
	// 导入模拟接口生成的三餐推荐的数据
	import dailyData from "@/common/daily.data.js"
	export default {
		data(){
			return{
				TabCur: 0,
				// scrollLeft: 0,
				// 每日推荐的数据，现在是获取common文件夹中的模拟数据
				scrollViewList: dailyData,
				// 轮播内容的高度，即早餐/午餐/晚餐列表的高度
				swiperHeight:"0px",
				// 页面可视区域高度
				totalHeight:"0px"
			}
		},
		components: {"daily-dishes":dailyDishes},
		onLoad(){
			uni.getSystemInfo({	//获取系统信息
				success: (res) => {
					this.totalHeight = res.windowHeight + 'px'
					console.log(this.totalHeight)
				},
				fail: (res) => {
					console.log('error')
				}
			}),
			this.getDailyDishes()
		},
		onShow(){
			// 获取".footer"元素的高度，即早餐/...列表的高度
			this.$nextTick(() =>{
				let info = uni.createSelectorQuery().select(".footer");
				info.boundingClientRect(data => {
					console.log(data)
					this.swiperHeight = data.height+'px';
					console.log(this.swiperHeight);
				}).exec();
			})
		},
		methods:{
			//点击搜索框，跳转搜索页
			toSearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},

			// 点击导航，将返回的参数赋值给TabCur，转到对应的区域
			changeSwiper:function(index){
				if (this.TabCur == index) {
					return false;
				} else {
					this.TabCur = index;
				}
			},
			// 滑动下面区域，上面的导航也跟着变化
			changeScroll:function(e){
				this.TabCur = e.target.current;
			},
			
			// 获取三餐菜谱推荐的数据，接口开发完成后，取消注释
			// async getDailyDishes(){
			// 	const res = await this.$myRequest({
			// 		url:'mock/669879/api/daily'
			// 	})
			// 	console.log(res)
			// 	this.scrollViewList = res.data.data
			// }
		}
	}
</script>
<style lang="scss">

	.daily{
		display: flex;
		flex-direction: column;
		.search{
			background-color: #F56C6C;
			padding: 10px 40px;
		}
		.footer{
			flex: 1;
		}
		// .swiper{
		// 	width: 100%;
		// 	height: 100%;
		// 	swiper-item{
		// 		height: 100%;
		// 		width: 100%;
		// 	}
		// }

	}
</style>
